/*1顶部区域*/
.top{
	height: 60px;
	width: 100%;/*父元素body的宽*/
	background-color: black;
	/*固定定位固定导航条*/
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;/*防止被后面的定位流覆盖*/
}
.top .top_in{
	width: 1200px;
	margin: 0 auto;
	height: 100%;/*父元素div的高*/
	/*background-color: #999999;*/
}
/*顶部左边*/
.top .top_left{
	float: left;
	height: 100%;
	width: 190px;
	/*background-color: pink;*/
}
.top .top_left>h1{
	width: 100%;
	height: 100%;
}
.top .top_left>h1>a{
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url("../img/nubia-logo.png");
}
/*顶部右边*/
.top .top_right{
	float: right;
	height: 100%;
	width: 740px;
	/*background-color: pink;*/
	
}
.top_right .top_nav{
	width: 550px;
	height: 100%;
	float: left;
/*	background-color: #000000;*/
	
}
.top_nav li{
	float: left;
}
/*导航条文字样式*/
.top_nav li>a{
	font-size: 16px;
	font-weight: bold;
	line-height: 60px;
	text-align: center;
	color: #FFFFFF;
	margin-left: 40px;
}
/*文字悬浮*/
.top li>a:hover{
	color: red;
}
.top .top_login{
	width: 150px;
	height: 100%;
	float: right;
/*	background-color: black;*/
	
}
/*登录注册*/
.top_login>li{
	float: right;
	line-height: 60px;
	margin-left: 10px;
	
}
.top_login>li>a{
	color: #999999;
	font-size: 14px;
}
.top_login li:nth-child(3){
	width: 30px;
	height: 30px;
	background: url(../img/nubia-syb-all.png);
	margin-top: 15px;
}

/*2广告区域*/
.banner{
	height: 860px;
	width: 100%;
	/*background-color: yellowgreen;*/
}
 .banner .nav_out{
	width: 100%;
	height: 121px;
	background-color: whitesmoke;
	position: absolute;
	z-index: 10;
	padding-top: 60px;/*给导航条让位置*/
}
.banner .nav{
	width: 1200px;
	height: 121px;
	/*margin: 0 auto;  无效*/
	

	
}
.banner .nav>ul {
	width: 100%;
	height: 100%;
	/*background: #999999;*/
	padding-left:75px ;
	padding-right: 75px;
	box-sizing: border-box;
}
.banner .nav>ul li{
	width: 150px;
	height: 100%;
	/*border:  1px solid blue;
	box-sizing: border-box;*/
/*	background: plum;*/
	float: left;
	text-align: center;
}
/*底部边框*/
.banner .nav>ul>li:hover{
	border-bottom: 2px solid blue;
	box-sizing: border-box;
}
/*广告区域图片*/
.banner .nav>ul li img{
	width: 120px;
	height: 80px;
	margin-top: 15px;
	}
.banner .figure{
	width: 100%;
	height: 600px;
	background: pink;
	text-align: center;
	overflow: hidden;/*当子元素图片超出时隐藏滚动条*/
	position: relative;
}
/*轮播图*/
.banner .figure img{
	height: 600px;/*只设置宽度或者高度可以等比拉伸图片*/
 margin: 0 -100%;/* What happened?居中?*/
	
	
}
.banner .figure ol{
	width: 150px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-left: -75px;
	margin-top: -60px;
	/*background-color: black;*/

	
}
.banner .figure >ol>li{
	height: 8px;
	width: 8px;
	margin-left: 15px;
	float: left;
	background: darkcyan;
	border-radius: 50%;/*li图标变为圆形*/
	border: 2px solid transparent;/*透明色*/
	/*过渡动画*/
transition: all 1s;
	
}
.banner .figure>ol>li:hover{
	border: 2px solid red;
	background: transparent;/*背景色透明*/
	transform:scale(1.4 ,1.4) ;/*缩放*/
}

.banner .video{
	width: 1200px;
	height: 250px;
	margin: 0 auto;
	margin-top: 10px;

}
.banner .video>ul{
	width: 100%;
	height:250px ;
	
		/*伸缩布局*/
	display: flex;
	justify-content: space-around;
	
}
.banner .video>ul>li{
	width: 396px;
	height: 250px;
	background: black;
	float: left;

	text-align: center;
	overflow: hidden;
	 position: relative;
}
.banner .video .video_info{
	position: absolute;
	width: 100%;
	height: 155px;
	bottom: 0;
	opacity: 0;/*透明度为0，特点是子元素也会跟着不显示*/
}
.banner .video>ul>li:hover .video_info{
    opacity: 1;
}
/*蒙版效果*/
.banner .video>ul>li:hover>img{
	opacity: 0.5;
}
/*播放动画*/
.banner .video>ul>li:hover .video_info>img{
	animation: sport 2s 0.5s ease-in-out infinite;
}

/*缩放效果*/
@keyframes sport{
	
	20%{  transform: scale(0.8);}
    40%{  transform: scale(1.2);}
    60%{  transform: scale(0.9);}
    80%{  transform: scale(1);}
    100%{  transform: scale(1);}
}
.banner .video .video_info h3{
	color: white;
	font-size: 16px;
	line-height: 40px;

	}
.banner .video .video_info p{
	color: white;
}
.banner .video ul>li>img{
	height: 100%;
	margin: 0 -100%;
	
}
/*3内容区域*/
.content{
	width: 100%;
	height: 1883px;
	/*background-color: blue;*/

	
}

.content>dl{
	width: 1200px;
	height: 100%;
	margin: 0 auto;	
/*	background: gray;*/
	
}
.content>dl>dt{
	text-align: center;
	margin-top: 40px;
	margin-bottom: 30px;
}
.content>dl>dt>h3{
	font-size: 35px;
	color: #333;
}
.content>dl>dt>p{
	margin-top: 20px;
	color: #e8340e;
}
/*最新产品*/
.content .count_phone{
	width: 1200px;
	height: 1200px;
/*	background: yellow;*/
}
.content .count_phone>li{
	background: white;
	float: left;
	position: relative;
	overflow: hidden;
}
.content .count_phone>li:nth-child(1){
	 width: 1200px;
    height: 395px;

     margin-bottom: 10px;
	}
	.content .count_phone>li:nth-child(2){
	width: 395px;
    height: 795px;
    margin-right: 10px;
   
	}
	.content .count_phone>li:nth-child(3){
	  width: 795px;
    height: 390px;
    margin-bottom: 10px;
  
	}
	.content .count_phone>li:nth-child(4){
	 width: 390px;
    height: 395px;
    margin-right: 10px;
   
	}
	.content .count_phone>li:nth-child(5){
	 width: 395px;
    height: 395px;
  
	}
	/*产品图片*/
.count_phone>li>img{
	width: 100%;/*宽度和容器一样等比拉伸*/
	transition: all 1s; /*过度效果*/
}
/*调整部分图片*/
.count_phone>li:nth-child(1)>img{
	margin-top: 60px;
	

}
	/*最新产品图片文字*/
.count_phone .phong_dis{
	width: 200px;
	position: absolute;
	/*居中*/
	left: 50%;
	margin-left: -100px;
	/*距离底部10像素*/
	bottom: 10px;
	text-align: center;/*父元素设置后子元素全部居中*/
}	
/*h4文字*/
	.count_phone .phong_dis>h4{
		font-size: 20px;
		color: #000000;
	}
	
	/*p*/
	.count_phone .phong_dis>p{
		font-size: 15px;
		margin-bottom: 10px;
		color: #999999;
	}
	/*span做成按钮*/
		.count_phone .phong_dis>span{
			display: inline-block;
			width: 108px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			border: 1px solid #ccc;
			border-radius: 10px;/*边框变为圆角*/
			color: #000000;
			
		}
		
/*单独修改图片1的文字位置*/
.count_phone :nth-child(1) .phong_dis{
	left: 0%;
	margin-left: 820px;
	margin-bottom: 150px;
}		

/*添加动画效果,先偏移后还原*/
.count_phone>li:nth-child(1)> img{
	margin-left: -100px;
}
.count_phone>li:nth-child(1):hover>img{
	margin-left: 0px;
}
.count_phone>li:nth-child(3)> img{
	margin-left: 100px;
}
.count_phone>li:nth-child(3):hover>img{
	margin-left: 0px;
}
/*缩放*/
.count_phone>li:hover .phone_scale{
	transform: scale(1.2,1.2);
}
/*精选配件*/
.content .content_accessories{
   width: 1200px;
    height: 300px;
	  /*伸缩布局*/
   display: flex;
   justify-content: space-between;
   
}
.content .content_accessories>li{
    float: left;
    width: 295px;
    height: 100%;
    /*li的间隙，伸缩布局取代*/
   /* margin-right: 5px;*/
   background: white;
   overflow: hidden;
}
/*配件图片*/
.content_accessories img{
	width: 100%;
    transition: all 0.5s;/*过度时间*/
}
.content_accessories p{
	text-align: center;
	margin-top: 20px;
}
/*动画*/
.content_accessories>li:hover img{
	transform: scale(1.2,1.2);
}
/*4底部区域*/
.footer{
	height: 396px;
	width: 100%;
	/*background-color: yellow;*/
}
.footer_in{
	width: 1200px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
}
/*标题*/
.footer .footer_top{
    margin-top: 40px;
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #ccc;/*border作为横线*/
   /* background-color: green;*/
}
/*内容*/
.footer .footer_center{
    overflow: hidden;
    margin-bottom: 20px;
    /*background-color: yellow;*/
}
.footer .footer_center>dl{
    float: left;
    width: 200px;
      /* background-color: blue;*/
}
.footer .footer_center>dl>dt{
    color: #000;
    font-size: 14px;
    line-height: 30px;
   /* background: pink;*/
}
.footer .footer_center>dl>dd{
    line-height: 20px;
   /* background: gainsboro;*/
}
/*文字变红*/
.footer .footer_center>dl>dd:hover a{
    color: red;
}
/*底部文字关于我们*/
.footer .footer_copyright{
    float: left;
    list-style: none;
}
.footer .footer_copyright>li{
    float: left;
}
.footer .footer_copyright>li>a{
    padding: 10px;
    font-size: 10px;
}
.footer .footer_copyright>li:first-child a{
    padding-left: 0;
}
.footer .footer_copyright>li:hover a{
    color: #000;
}

.footer .footer_social{
    float: left;
    margin-left: 50px;
    list-style: none;
    margin-top: -10px;
    font-size: 20px;
}
.footer .footer_social>li{
    float: left;
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
/*精灵图*/
.footer .footer_social>li>a{
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url("../img/nubia-syb-all.png");
}
/*定位*/
.footer .footer_social>li:nth-child(1) a{
    background-position: -246px 0;
}
.footer .footer_social>li:nth-child(2) a{
    background-position: -186px 0;
}
.footer .footer_social>li:nth-child(3) a{
    background-position: -126px 0;
}
.footer .footer_social>li:nth-child(4) a{
    background-position: -156px 0;
}
/*注册许可*/
.footer .footer_info{
    float: left;
    font-size: 10px;
    line-height: 30px;
}